// components/progressBar/progressBar.js
let areaWidth = 0
let viewWidth = 0
let currentSec = -1 
const backgroundAudioManager = wx.getBackgroundAudioManager()
let durationTime = backgroundAudioManager.duration // 歌曲总时长
let isMoving = false // 判断用户是否在拖拽进度条
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isSameMusic: Boolean
  },

  /**
   * 组件的初始数据
   */
  data: {
    time:{
      currentTime: '00:00',
      totalTime: '00:00'
    },
    movableX: 0,
    progress:0
  },
  // 组件的生命周期函数
  lifetimes: {
    // 在组件在视图层布局完成后执行
    ready(){
      if (this.properties.isSameMusic && this.data.time.totalTime == '00:00') {
        this._setTotalTime()
      }
      this._getProgress()
      this._bindBGMevent()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 小圆点位置发生改变时触发
    onViewChange(e) {
      if (e.detail.source === 'touch') {
        this.data.progress = e.detail.x / (areaWidth-viewWidth) * 100
        this.data.movableX = e.detail.x
        isMoving = true
      }
    },
    // 用户拖拽小圆点松开后触发
    onViewTouchend() {
      const currentTime =this._fomatTime(backgroundAudioManager.currentTime) 
      this.setData({
        progress: this.data.progress,
        movableX: this.data.movableX,
        'time.currentTime': `${currentTime.min}:${currentTime.sec}`
      })
      // 背景音乐跳转到指定位置
      backgroundAudioManager.seek(durationTime * this.data.progress / 100)
      isMoving = false
    },
    // 获取进度条宽度和圆点宽度
    _getProgress(){
      const query = this.createSelectorQuery()
      query.select('.movable-area').boundingClientRect()
      query.select('.movable-view').boundingClientRect()
      query.exec((res) => {
        areaWidth = res[0].width
        viewWidth = res[1].width
      })
    },
    // 背景音乐的一些事件
    _bindBGMevent(){
      backgroundAudioManager.onPlay(() => {
        isMoving=false
        this.triggerEvent('isPlaying')
      })

      backgroundAudioManager.onPause(() => {
        this.triggerEvent('isPause')
      })
      // 当音频可以播放时触发
      backgroundAudioManager.onCanplay(() => {
        /**
         * onCanplay这个方法有一个bug，他无法正常的获取当前播放音频的时长
         * （backgroundAudioManager.duration），总是获取到undefined,
         * 解决办法就是设置一个定时器，一秒后再获取
           */ 
        if (backgroundAudioManager.duration !== undefined) {
          this._setTotalTime()
        }else {
          setTimeout(() => {
            this._setTotalTime()
          },1000)
        }
      }),

      // 监听背景音频播放进度更新事件
      backgroundAudioManager.onTimeUpdate(() => {
        if (!isMoving) {
          // 获取当前音乐所播放到的时间
          const currentTime = backgroundAudioManager.currentTime
          // 节流操作，因为这个事件会在一秒内触发多次
          const sec = currentTime.toString().split('.')[0]
          if (sec != currentSec) {
            // console.log(currentTime);
            const fomatTime = this._fomatTime(currentTime)
            this.setData({
              // 减去小圆点的宽度才能让进度条紧贴小圆点的尾部
              movableX:  currentTime / durationTime * (areaWidth - viewWidth),
              progress: currentTime / durationTime * 100,
              'time.currentTime': `${fomatTime.min}:${fomatTime.sec}`
            })
            currentSec = sec
          }
        }
      })
      backgroundAudioManager.onEnded(() => {
        // 当音乐播放结束后触发的事件
        this.triggerEvent('musicEnd')
      })
    },
    // 设置音乐时间
    _setTotalTime() {
      // 获取音乐时长
      durationTime = backgroundAudioManager.duration
      const formatTime = this._fomatTime(durationTime)
      this.setData({
        // 单独设置对象中的某个值要用引号
        'time.totalTime': `${formatTime.min}:${formatTime.sec}`
      })
    },
    // 格式化时间
    _fomatTime(time){
      const min = this._addZero(Math.floor(time / 60))
      const sec = this._addZero(Math.floor(time % 60))
      return {
        min,
        sec
      }
    },
    // 时间补0
    _addZero(num){
      return num < 10 ? '0' + num : num
    }
  }
})
